<template>
  <div>
    <!-- 卡片区域 -->
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      v-loading="loading"
    >
      <template #header>
        <div>
          <span>
            <el-button type="primary" @click="addTra" size="default"
              >添加</el-button
            >
          </span>
        </div>
      </template>
      <el-table border stripe :data="trademarkList">
        <el-table-column
          label="序号"
          type="index"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          label="品牌名称"
          align="center"
          prop="tmName"
        ></el-table-column>
        <el-table-column label="品牌Logo" align="center">
          <template v-slot="{ row }">
            <el-image :src="row.logoUrl" style="height: 60px"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              title="修改品牌信息"
              circle
              @click="updateTra(row)"
            ></el-button>
            <el-button
              type="info"
              icon="el-icon-delete-solid"
              title="删除品牌"
              @click="delTra(row.id)"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="3"
        :page-sizes="[3, 5, 7, 9]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="changeLimit"
        @current-change="changePage"
      />
    </el-card>

    <!-- 弹窗区域 -->
    <el-dialog title="" :visible.sync="dialogVisible" width="55%">
      <el-form
        ref="traForm"
        label-width="180px"
        :rules="rules"
        :model="traForm"
      >
        <el-form-item label="品牌名称" prop="tmName">
          <el-input
            style="width: 80%"
            placeholder="1-50个字符"
            v-model="traForm.tmName"
          />
        </el-form-item>
        <el-form-item label="品牌LOGO" prop="logoUrl">
          <el-upload
            class="avatar-uploader"
            action="http://gmall-h5-api.atguigu.cn/admin/product/upload"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
          >
            <img
              :src="traForm.logoUrl"
              height="100"
              class="avatar"
              v-if="traForm.logoUrl"
            />
            <i class="el-icon-plus" v-else></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickEnter">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqAddTrademark,
  reqDeleteTrademark,
  reqTrademarkList,
  reqUpdateTrademark,
} from "@/api/trademark";

export default {
  data() {
    return {
      trademarkList: [], // 品牌列表
      query: {
        page: 1, // 当前页码
        limit: 3, // 每页商品的个数
      },
      total: 100, // 总页数
      loading: false, // 正在加载中
      dialogVisible: false, // 弹出层是否显示
      // 新增或修改的内容
      traForm: {
        // 品牌名称
        tmName: "",
        // 品牌logo
        logoUrl: "",
      },
      //表单校验规则
      rules: {
        tmName:[{required: true, message: '请输入品牌名称', trigger: 'blur'}],
      },
      isEdit: false, // 编辑状态  true 为编辑 false为新增
    };
  },

  methods: {
    // 方法1  封装获取品牌列表的方法
    async getTrademarkList() {
      this.loading = true;
      const res = await reqTrademarkList(this.query);
      this.trademarkList = res.data.records;
      this.total = res.data.total;
      this.loading = false;
    },

    // 方法2 改变每页条数
    changeLimit(newLimit) {
      this.query.limit = newLimit;
      this.getTrademarkList();
    },

    //方法3 改变当前页
    changePage(newPage) {
      this.query.page = newPage;
      this.getTrademarkList();
    },

    // 方法4 修改品牌信息
    updateTra(data) {
      this.isEdit = true;
      this.traForm = { ...data };
      this.dialogVisible = true;
    },

    // 方法5 删除品牌事件
    async delTra(id) {
      const delRes = await this.$confirm("此操作将永久删除该品牌, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(e=>e);

      // 如果点击了cancel 说明用户取消了删除
      if(delRes === 'cancel') {
        return this.$message('取消删除')
      }
      const res = await reqDeleteTrademark(id)
      this.$message.success('删除'+ res.message)
      this.getTrademarkList()
    },
    // 方法6 添加品牌 事件
    addTra() {
      this.isEdit = false;
      this.traForm = {
        tmName: "",
        logoUrl: "",
      };
      this.dialogVisible = true;
    },

    // 方法7 点击确定事件
    async clickEnter() {
      if (this.isEdit) {
        // 编辑状态
        await reqUpdateTrademark(this.traForm);
      } else {
        // 新增状态
        await reqAddTrademark(this.traForm);
      }
      this.getTrademarkList();
      this.dialogVisible = false;
    },

    // 文件上传成功的回调
    handleAvatarSuccess(response) {
      this.traForm.logoUrl = response.data;
    },

    // 上传文件前的钩子
    beforeAvatarUpload(rawFile) {
      // 判断文件的类型是否时图片
      if (rawFile.type !== "image/jpeg") {
        ElMessage.error("Avatar picture must be JPG format!");
        return false;
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error("Avatar picture size can not exceed 2MB!");
        return false;
      }
      return true;
    },

    
  },

  created() {
    // 初始化1 获取品牌列表
    this.getTrademarkList();
  },
};
</script>

<style scoped>
.el-pagination {
  margin-top: 20px;
}
</style>
